<template>
  <div>
    <div class="mb20">
      <p class="mb10">messageBox------</p>
      <Button animation="rubberBand" @click="showMessageBox">messageBox</Button>
      <Button animation="rubberBand" @click="showMessageBoxAlert">messageBox.alert</Button>
      <Button animation="rubberBand" @click="showMessageBoxConfirm">messageBox.confirm</Button>
      <Button animation="rubberBand" @click="showMessageBoxPrompt">messageBox.prompt</Button>
    </div>
    <div>
      <p>message------</p>
      <Button @click="showMessage" >message</Button>
    </div>
  </div>
</template>
<script setup>
  import messageBox from "../components/MessageBox"
  import message from "../components/Message"
  import Button from "../components/Button"
  const showMessageBox = () => {
    messageBox({
      title: "提示！",
    }).then(res => {
      console.log("res",res)
    }).catch(_=>{
      console.log('catch')
    })
  }

  const showMessageBoxAlert = () => {
    messageBox.alert({
      title: "alert！",
    }).then(res => {
      console.log("res",res)
    }).catch(_=>{
      console.log('catch')
    })
  }

  const showMessageBoxConfirm = () => {
    messageBox.confirm({
      content: "确定删除此条数据吗！",
      showCacelButton: true,
    }).then(res => {
      console.log("res",res)
    }).catch(_=>{
      console.log('catch')
    })
  }

  const showMessageBoxPrompt = () => {
    messageBox.prompt({
      content: "请输入密码！",
    }).then(res => {
      console.log("res",res)
    }).catch(_=>{
      console.log('catch')
    })
  }

  const showMessage = () => {
    message.success({
      message:"来消息咯！",
      type: "",
    })
  }
</script>
<style>
  
</style>